<script>
import {ref} from 'vue'
import ling_kuang from '@/components/zong_men_ling_kuang.vue'
import fang_shi from '@/components/zong_men_fang_shi.vue'

export default {
  props: ['zong_men_num', 'xian'],
  emits: ['changeCome'],
  setup(props, {emit}) {
    let componentName = ref("ling_kuang")
    let num = ref(props.zong_men_num)
    return {
      num,
      componentName,
      hui_dao_xian() {
        props.xian()
      },
      huiDaoCome() {
        emit('changeCome')
      },
      changeComponent(to_num) {
        switch (to_num) {
          case "1":
            componentName.value = "ling_kuang";
            break
          case "2":
            componentName.value = "fang_shi";
            break
        }
      }
    }
  },
  components: {
    "ling_kuang": ling_kuang,
    "fang_shi": fang_shi
  },
  created() {
    this.initComponent()
  },
  methods: {
    initComponent() {
      switch (this.num) {
        case "1":
          this.componentName = "ling_kuang";
          break
        case "2":
          this.componentName = "fang_shi";
          break
      }
    }
  }
}
</script>

<template>
  <!-- 动态组件 -->
  <component :is="componentName" :huiDaoXian="hui_dao_xian" @huiDaoCome="huiDaoCome"
             @changeComponent="changeComponent"></component>
</template>

<style scoped>

</style>